<template>
  <view>
    <view class="banner-box">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item v-for="(item, index) in banners" :key="index">
          <navigator
            url="navigate/navigate?title=navigate"
            hover-class="navigator-hover"
          >
            <image
              class="img-banner"
              mode="scaleToFill"
              :src="item.imgUrl"
              @error="imageError"
            ></image>
          </navigator>
        </swiper-item>
      </swiper>
      <view class="search-bar">
        <uni-search-bar
          class="search-bar"
          radius="100"
          placeholder="输入股票代码/名称"
          bgColor="transpant"
          iconColor="#dccdc5"
          :inputValue="searchVal"
          @input="input"
          @confirm="search"
          @cancel="cancel"
          @focus="focus"
          @blur="blur"
        />
        <view class="search-lists" v-if="isShowSearchList">
          <view class="row" v-for="(item, index) in searchList" :key="index">
            <view class="col1">{{ item.code }}</view>
            <view class="col2">{{ item.name }}</view>
            <view class="col3" @click.native="addSearch(item)">立即添加</view>
          </view>
        </view>
      </view>
    </view>
    <view class="middle">
      <view class="menu-list">
        <view class="menu-item" v-for="(item, index) in menus" :key="index">
          <navigator
            class="menu-item"
            :url="item.link"
            hover-class="navigator-hover"
          >
            <image class="menu-icon" :src="item.imgUrl"></image>
            <text class="menu-label">{{ item.name }}</text>
          </navigator>
        </view>
      </view>
    </view>
    <view class="section-info">
      <view
        class="info-item"
        v-for="(item, index) in stockExponent"
        :key="index"
      >
        <view class="info-item-t">
          <view class="info-item-t__label">{{ item.label }}</view>
          <view class="info-item-t__value">{{ item.exponent }}</view>
        </view>
        <view class="info-item-b">
          <view class="info-item-b__label">{{ item.value }}</view>
          <view class="info-item-b__value">{{ item.percent }}</view>
        </view>
      </view>
    </view>
    <view class="infomation">
      <view class="title">热点资讯</view>
      <view
        class="wrap"
        v-for="(item, index) in infomationList"
        :key="index"
        @click="toDetail(item)"
      >
        <text class="time">{{ item.issueTime }}</text>
        <text class="summary">{{ item.summary }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import uniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
export default {
  components: {
    uniSearchBar
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      imageError: "https://s1.ax1x.com/2020/06/08/tWYwYF.jpg",
      banners: [
        { url: "xxx", imgUrl: "https://s1.ax1x.com/2020/06/08/tWYwYF.jpg" },
        { url: "xxx", imgUrl: "https://s1.ax1x.com/2020/06/08/tWYwYF.jpg" },
        { url: "xxx", imgUrl: "https://s1.ax1x.com/2020/06/08/tWYwYF.jpg" }
      ],
      menus: [
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        },
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        },
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        },
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        },
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        },
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        },
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        },
        {
          imgUrl: "xxx",
          name: "发布策略",
          link: "/pages/candle/candle"
        }
      ],
      stockExponent: [
        {
          label: "上证指数",
          exponent: "2930.80",
          value: "11.55",
          percent: "0.40%"
        },
        {
          label: "上证指数",
          exponent: "2930.80",
          value: "11.55",
          percent: "0.40%"
        },
        {
          label: "上证指数",
          exponent: "2930.80",
          value: "11.55",
          percent: "0.40%"
        }
      ],
      infomationList: [
        {
          id: 1,
          issueTime: "2020-06-07 17:39:00",
          summary:
            "【阿斯顿发啊的】是分散法萨德发撒的发违法沃尔芬发文峰区文峰为全额付全额文峰区文峰区分费全额且无法且无法区文峰区粉墙二分区分为费全额晚饭前二位发区文峰区费全额文峰区文峰企鹅无法企鹅发送到发"
        },
        {
          id: 2,
          issueTime: "2020-06-07 17:39:00",
          summary:
            "【阿斯顿发啊的】是分散法萨德发撒的发违法沃尔芬发文峰区文峰为全额付全额文峰区文峰区分费全额且无法且无法区文峰区粉墙二分区分为费全额晚饭前二位发区文峰区费全额文峰区文峰企鹅无法企鹅发送到发"
        }
      ],
      isShowSearchList: false,
      searchList: [
        {
          code: '603655',
          name: '联播科技',
        },
        {
          code: '555555',
          name: '联播科技',
        },
        {
          code: '603655',
          name: '联播科技',
        },
        {
          code: '603655',
          name: '联播科技',
        },
      ],
      searchVal: '',
    };
  },
  methods: {
    search(res) {
      uni.showToast({
        title: "搜索：" + res.value,
        icon: "none"
      });
    },
    input(res) {
      this.searchVal = res.value;
    },
    cancel(res) {
      uni.showToast({
        title: "点击取消，输入值为：" + res.value,
        icon: "none"
      });
    },
    focus(show) {
      this.isShowSearchList = true;
    },
    blur(show) {
      // setTimeout(() => {
      //   this.isShowSearchList = false;
      // }, 1000)
    },
    addSearch(data) {
      this.searchVal = data.code;
      this.isShowSearchList = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/common/scss/mixin.scss";
$searchInputColor: #dccdc5;
/deep/ .uni-searchbar__box {
  border: 0;
}
/deep/ .uni-searchbar__box-search-input {
  color: $searchInputColor;
}
/deep/ .uni-searchbar__box-icon-search {
  color: $searchInputColor;
}
/deep/ .uni-searchbar__text-placeholder,
.uni-input-placeholder {
  color: $searchInputColor;
}
/deep/ .uni-searchbar__cancel {
  color: $searchInputColor;
}
.search-lists {
  z-index: 9;
  position: absolute;
  left: 80upx;
  right: 80upx;
  top: 100upx;
  background: #fff;
  color: #333;
  font-size: 26upx;
  .row {
    @include flex(space-between, row, center);
    padding: 20upx 10upx;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 2upx solid #ccc;
    }
    .col1 {
      flex: 4;
    }
    .col2 {
      flex: 8;
    }
    .col3 {
      color: red;
    }
  }
}

.img-banner {
  width: 750upx;
}
.banner-box {
  position: relative;
  .search-bar {
    position: absolute;
    top: 20upx;
    left: 50upx;
    right: 50upx;
    background: transparent;
  }
}
.menu-list {
  margin: 40upx 0 20upx;
  @include flex();
  flex-wrap: wrap;
  .menu-item {
    flex: 0 0 25%;
    @include flex(center, column, center);
    margin-bottom: 20upx;
    .menu-icon {
      width: 106upx;
      height: 106upx;
      border-radius: 50%;
      background: #eee;
    }
    .menu-label {
      font-size: 28upx;
    }
  }
}
.section-info {
  @include flex(space-around, row, center);
  .info-item {
    padding: 0 20upx;
    position: relative;
    // border-right: 2upx solid #ccc;
    &::after {
      content: "";
      position: absolute;
      right: -20%;
      top: 20upx;
      bottom: 40upx;
      margin: auto;
      border-right: 2upx solid #ccc;
    }
    &-t {
      @include flex(center, column, center);
      &__label {
        font-size: 36upx;
      }
      &__value {
        font-size: 30upx;
        color: red;
      }
    }
    &-b {
      @include flex(space-between, row, center);
      font-size: 24upx;
      color: red;
    }
  }
}
.infomation {
  padding: 20upx;
  .title {
    padding-left: 20upx;
    border-left: 4upx solid red;
    font-size: 30upx;
  }
  .wrap {
    padding: 20upx 0;
    font-size: 28upx;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: 2upx solid #c4c4c4;
    }
  }
  .time {
    color: #3892de;
  }
  .summary {
    color: #6d6d6d;
  }
}
</style>
